import {Card} from 'antd'
import { useSearchParams } from 'react-router-dom'
import { useStore } from '@/store'
import './index.scss'
import { useState, useEffect } from 'react'


const ExamPaper = (props) => {
    const [params] = useSearchParams()
    const id = params.get("id")
    const api = params.get("api")
    const { operateStore } = useStore()
    const [details, setDetails] = useState([])

    useEffect(() => {
        const loadDetail = async () => {
            const data = await operateStore.getDetails(api, id)
            setDetails(data.exam_questions)
        }
        loadDetail()
      }, [api, id, operateStore])
  
    return (
        <div className='exam_paper'>
            {details && details.length > 0 && (
                <Card>
                    {JSON.parse(details).map(item => {
                      return <>
                        <p>{item.title}</p>
                        {item.questions.map(data => {
                            if(data.subject_type !== "questions"){
                                return  <ul>
                                            <li>{data.no + "." + data.subject}</li>
                                            <li>{"A."+data.optionA}</li>
                                            <li>{"B."+data.optionB}</li>
                                            <li>{"C."+data.optionC}</li>
                                            <li>{"D."+data.optionD}</li>
                                        </ul>
                            }else{
                                return  <ul>
                                            <li>{data.no + "." + data.subject}</li>
                                        </ul>
                            }
                        })}
                        {/* <List
                            itemLayout="horizontal"
                            dataSource={item.questions}
                            renderItem={(data) => (
                            <List.Item>
                                <List.Item.Meta
                                title={data.no + "." + data.subject}
                                description={"A."+data.optionA + "B."+data.optionB+ "C."+data.optionC+ "D."+data.optionD}
                                />
                                <p>{"A."+data.optionA}</p>
                                <p>{"B."+data.optionB}</p>
                                <p>{"C."+data.optionC}</p>
                                <p>{"D."+data.optionD}</p>
                            </List.Item>
                            )}
                        /> */}
                        </>
                    })}
                </Card>
            )}
        </div>
    )
} 

export default ExamPaper